<template>
<view>
    <canvas
      class="canvas"
      canvas-id="myCanvas"
      id="myCanvas"
      :style="{
        width: system.w + 'px',
        height: system.h + 'px'
      }"
      :width="system.w"
      :height="system.h"
    ></canvas>

    <image v-if="src" :src="src" :style="{width: '750rpx'}"  />
  </view>
</template>

<script>
import { drawSquarePic, drawTextReturnH, getSystem } from './index'
export default {
  data() {
      return {
        system: {},
        ctx: null,
        // 大图
        imgBig: 'https://pcn-omp.oss-cn-beijing.aliyuncs.com/fa7594627fa74f02bb3c9dbebe765127.jpg?x-oss-process=image/resize,p_90',
        // 太阳码
        imgSun: 'https://pcn-omp.oss-cn-beijing.aliyuncs.com/eec12e3fb60b401d822c5de35254c31e.jpg?x-oss-process=image/resize,p_90',
        src: ''
      }
  },
  created() {
      // 获取设备信息
      this.system = getSystem()
      console.log('system:',JSON.parse(JSON.stringify(this.system)));
  },
  mounted(){
    this.creatPoster()
    setTimeout(()=>{
      console.log('生成海报')
      this.handleSaveCanvasImage()
    }, 3000)
  },
  methods: {
    // 生成海报
     async creatPoster() {
        const ctx = uni.createCanvasContext('myCanvas', this)
        this.ctx = ctx

        //清空之前的画布内容
        ctx.clearRect(0, 0, this.system.w, this.system.h) 
        ctx.draw() 

        // 绘制白色背景
        const optionBg = this.sizeBg()
        await drawSquarePic(
            ctx,
            optionBg.x,
            optionBg.y,
            optionBg.w,
            optionBg.h,
            optionBg.r
        )
        // 绘制大图
        const optionImgBig = this.sizeImgBig()
        await drawSquarePic(
            ctx,
            optionImgBig.x,
            optionImgBig.y,
            optionImgBig.w,
            optionImgBig.h,
            optionImgBig.r,
            optionImgBig.url
        )
        // 绘制太阳嘛
        const optionImgSun = this.sizeImgSun()
        await drawSquarePic(
            ctx,
            optionImgSun.x,
            optionImgSun.y,
            optionImgSun.w,
            optionImgSun.h,
            optionImgSun.r,
            optionImgSun.url
        )
        // 绘制: 长按识别二维码
        const optionWordShort = this.sizeWordShort()
        drawTextReturnH(
            ctx,
            optionWordShort.text,
            optionWordShort.x,
            optionWordShort.y,
            optionWordShort.w,
            optionWordShort.fontSize,
            optionWordShort.color,
            optionWordShort.lineHeight,
            "",
            optionWordShort.fontWeight
        )
        // 绘制: 我正在
        const optionWordLong = this.sizeWordLong()
        drawTextReturnH(
            ctx,
            optionWordLong.text,
            optionWordLong.x,
            optionWordLong.y,
            optionWordLong.w,
            optionWordLong.fontSize,
            optionWordLong.color,
            optionWordLong.lineHeight,
            "",
            optionWordLong.fontWeight
        )
        // 绘制按钮
        const sizeBtn = this.sizeBtn()
        drawSquarePic(
            ctx,
            sizeBtn.x,
            sizeBtn.y,
            sizeBtn.w,
            sizeBtn.h,
            sizeBtn.r,
            "",
            sizeBtn.other
        )
        //  按钮文字
        const optionBtnText = this.sizeBtnText()
        drawTextReturnH(
            ctx,
            optionBtnText.text,
            optionBtnText.x,
            optionBtnText.y,
            optionBtnText.w,
            optionBtnText.fontSize,
            optionBtnText.color,
            optionBtnText.lineHeight,
            "center",
            optionBtnText.fontWeight
          )
     },
      //  配置白色背景的相关坐标
     sizeBg(){
       // 375px设计图的尺寸
       const width = 311
       const height = 470
       const system = this.system

        return {
          r: 1,
          w: width * system.scale,
          h: height * system.scale,
          // 保证x轴居中
          x: (system.w - width * system.scale) / 2,
          // 保证y轴居中
          y: (system.h - height * system.scale) / 2,
        }
     },
     // 大图的相关坐标
     sizeImgBig(){
      // 375px设计图的尺寸
       const width = 271
       const height = 300
       const system = this.system

      const optionBg = this.sizeBg()

        return {
          r: 1,
          w: width * system.scale,
          h: height * system.scale,
          // 保证x轴居中
          x: (system.w - width * system.scale) / 2,
          y: optionBg.y + 20,
          url: this.imgBig
        }
     },
     // 太阳码的相关坐标
     sizeImgSun(){
         // 375px设计图的尺寸
       const width = 68
       const height = 68
       const system = this.system

      const optionImgBig = this.sizeImgBig()

       return {
          r:width * system.scale / 2,
          w: width * system.scale,
          h: height * system.scale,
          // 保证x轴居中
          x: optionImgBig.x,
          y: optionImgBig.y + optionImgBig.h + 11.37,
          url: this.imgSun
       }
     },
     // 长按识别二维码  的相关坐标
     sizeWordShort(){
      // 375px设计图的尺寸
       const width = 195
       const height = 20
       const system = this.system

       const optionImgSun = this.sizeImgSun()

       return {
          // 保证x轴居中
          x: optionImgSun.x + optionImgSun.w + 3*system.scale,
          y: optionImgSun.y + (5+height/2)*system.scale,
          text: '长按识别二维码',
          fontSize: 12,
          color: '#323639',
          lineHeight: height*system.scale,
          w: width * system.scale,
          fontWeight: 'bold'
       }
     },
     // 我正在的文字  的相关坐标
     sizeWordLong(){
       // 375px设计图的尺寸
       const width = 195
       const height = 20
       const system = this.system

      const optionWordShort = this.sizeWordShort()

       return {
          // 保证x轴居中
          x: optionWordShort.x,
          y: optionWordShort.y + (20 + 2)* system.scale,
          text: '我正在「保时捷在线商城」参加限量款预约抽签，邀请您一起助力预约！',
          fontSize: 12,
          color: '#000',
          lineHeight: height*system.scale,
          w: width * system.scale,
          fontWeight: 'normal'
       }
     },
     // 按钮的相关坐标
     sizeBtn(){
      // 375px设计图的尺寸
       const width = 271
       const height = 36
       const system = this.system

       const optionImgSun = this.sizeImgSun()

        return {
          r: 1,
          w: width * system.scale,
          h: height * system.scale,
          // 保证x轴居中
          x: (system.w - width * system.scale) / 2,
          // 保证y轴居中
          y: optionImgSun.y + optionImgSun.h + 13 * system.scale,
          other: {
            mode: 'stroke',
            color: '#323639'
          }
        }
     },
     // 按钮文字的相关坐标
     sizeBtnText(){
       // 375px设计图的尺寸
       const width = 247
       const height = 22
       const system = this.system

      const sizeBtn = this.sizeBtn()

       return {
         // 保证x轴居中
          x: (system.w - width * system.scale) / 2,
          y: sizeBtn.y + 22 * system.scale,
          text: '点击保存图片，分享至朋友圈',
          fontSize: 12,
          color: '#323639',
          lineHeight: height*system.scale,
          w: width * system.scale,
          fontWeight: 'bold'
       }
     },
    // 保存图片到本地
     handleSaveCanvasImage() {
        const optionBg = this.sizeBg()
        // 把画布转化成临时文件
        uni.canvasToTempFilePath(
          {
            x: optionBg.x,
            y: optionBg.y,
            width: optionBg.w, // 画布的宽
            height: optionBg.h, // 画布的高
            destWidth: optionBg.w * 5,
            destHeight: optionBg.h * 5,
            canvasId: 'myCanvas',
            success:(obj)=> {
            
              this.src = obj.tempFilePath
             
              //保存图片至相册
              uni.saveImageToPhotosAlbum({
                filePath: obj.tempFilePath,
                success:(res) => {
                  uni.showToast({
                    title: '保存成功',
                    duration: 2000,
                    icon: 'none'
                  })
                },
                fail() {
                  uni.showToast({
                    title: '保存失败，稍后再试',
                    duration: 2000,
                    icon: 'none'
                  })
                }
              })

            },
            fail(err) {
              console.log('err:',err)
              uni.showToast({
                title: '保存失败，稍后再试',
                duration: 2000,
                icon: 'none'
              })
            }
          },
          this
        )
    }
  }
}
</script>

<style scoped>
.canvas{
  position: fixed;
  bottom: -100%;
}
</style>